<template>
  <div>

    <div class="maincss">
      <el-row>
        <el-card>
          <!--          <searchBox title='校验规则' :btn='btn' @func='showBtn'/>-->
          <el-row class="searchbox">
            <el-col span="1"> 检验规则 </el-col>
            <el-col span="3">
              <el-input
                placeholder="项目名称"
                v-model="queryParams.projectName"
              >
              </el-input>
            </el-col>
            <el-col span="6">
              <el-tree
                :data="deptOptions"
                :props="defaultProps"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="tree"
                :default-expand-all="false"
                @node-click="handleNodeClick"
              />
            </el-col>
            <el-col span="1">
              <el-button @click="handleLoadAndQuery" type="primary">查询</el-button>
            </el-col>
            <el-col span="2">
              <el-button @click="handleOpenAdd" type="primary">新增</el-button>
            </el-col>
            <el-col span="2">
              <el-button type="primary">模板下载</el-button>
            </el-col>
            <el-col span="1">
              <el-button type="primary">导入</el-button>
            </el-col>
          </el-row>
          <el-card class="gray-card no-border no-margin-top" shadow="never">
            <el-table
              v-loading="loading"
              :data="checkList"
              style="width: 100%;"
            >
              <el-table-column label="检验项" align="center" prop="itemName" :show-overflow-tooltip="true"/>
              <el-table-column label="所属项目" align="center" prop="projectName" :show-overflow-tooltip="true"/>
              <el-table-column label="所属科室" align="center" prop="deptName" :show-overflow-tooltip="true"/>
              <el-table-column label="创建人" align="center" prop="createBy"/>
              <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true"/>
              <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true"/>
              <el-table-column label="状态" align="center" prop="status" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span v-if="scope.row.status==0">作废</span>
                  <span v-if="scope.row.status==1">正常</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleOpenDetail(scope.row)"
                  >详情
                  </el-button>
                  <el-button
                    v-if="scope.row.status==1"
                    size="mini"
                    type="text"
                    @click="handleOpenEdit(scope.row)"
                  >编辑
                  </el-button>
                  <el-button v-if="scope.row.status==1"
                    size="mini"
                    type="text"
                    @click="handleCancel(scope.row)"
                  >作废
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>

          <pagination v-show="total>0" :total="total"
                      :page.sync="queryParams.pageNum"
                      :limit.sync="queryParams.pageSize"
                      @pagination="handleLoadAndQuery"/>


        </el-card>
      </el-row>
    </div>
  </div>
</template>

<script>
import {listDetectionRules, updateDetectionRules, getDetectionRules} from "@/api/business/detectionRules"
import { downLoadExcel } from "@/utils/download";
import { treeselect } from "@/api/system/dept";

export default {
  name: "checkRule",
  components: {},
  data() {
    return {
      // 部门树选项
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      checkList: [],
      loading: false,
      redirect: undefined,
      activeName: '1',
      deviceInfo: {},
      status: [],
      inspectionRsult: [],
      value: '',
      btn: {
        add: true,
        reg: false,
        down: true,
        export: true,
        imp: false,
        ref: false,
        search: true
      },
      total: 10,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        projectName: '',
        deptId: ''
      }
    };
  },
  watch: {},
  created() {
    this.getTreeselect();
    this.$nextTick(() => {
      this.handleLoadAndQuery()
    })
  },
  methods: {
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.getList();
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    showBtn(data) {
      if (data == 'add') {
        this.handleOpenAdd()
      }
       else if (data === 'search') {
        this.handleLoadAndQuery()
      }
      else if (data == 'export') {
        this.handleExport()
      }
    },
    handleOpenAdd() {
      this.$router.push({path: "/examine/rules/addrule?id=&title=新增检测规则" + "&disabled=1"});
    },
    // 导出
    handleExport() {
      downLoadExcel('/system/detectionRules/export', this.queryParams);
    },
    handleOpenEdit(row) {
      this.$router.push({path: "/examine/rules/addrule?id="+ row.id + "&title=编辑检测规则" + "&disabled=1"});
    },
    handleOpenDetail(row) {
      this.$router.push({path: "/examine/rules/addrule?id="+ row.id + "&title=检测规则详情" + "&disabled=2"});
    },
    // 作废
    handleCancel(row) {
      let query = {
        id: row.id,
        status: 0
      }
      updateDetectionRules(query).then((res) => {
        this.$message.success('操作成功')
        this.handleLoadAndQuery()
      })
    },
    handleLoadAndQuery() {
      this.checkList = []
      this.loading = true;
      listDetectionRules(this.queryParams).then((res) => {
        this.loading = false;
        this.total = res.total;
        this.checkList = res.rows;
      })
        .catch(() => {
          this.loading = false;
        })
    }
  }
};
</script>
